<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalble=0;"
    />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta http-equiv="Cache" content="no-cache" />
    <title>驾安之星</title>
  </head>
  <style>
    body {
      padding: 0;
      margin: 0;
      text-align: center;
    }
    .logo {
      margin-top: 139px;
      width: 80%;
    }
    .download {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 294px;
      background: url('./image/bg@2x.png') no-repeat center center;
      background-size: 100% 100%;
    }
    .download-button {
      margin: 0 auto;
      margin-top: 170px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 170px;
      height: 47px;
      line-height: 47px;
      text-align: center;
      border-radius: 8px;
      color: white;
      border: 2px solid #ffffff;
    }
    .download-button:active {
      background-color: rgba(0, 0, 0, 0.35);
    }
    /* .download-button--andorid {
      margin-top: 120px;
    }
    .download-button--ios {
      margin-top: 120px;
    } */
    .download-icon {
      width: 27px;
      height: 27px;
    }
    .wechat {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 999;
      background: rgba(0, 0, 0, 0.6) url('./image/wechat.png') no-repeat center
        center;
      background-size: 100% 100%;
    }
  </style>
  <body>
    <img class="logo" src="./image/logo@2x.png" alt="" />
    <div class="download">
      <div
        class="download-button download-button--andorid"
        id="andorid-download"
      >
        <img class="download-icon" src="./image/Android@2x.png" alt="" />
        <div>Andorid下载</div>
      </div>
      <div class="download-button download-button--ios" id="ios-download">
        <img class="download-icon" src="./image/iphone@2x.png" alt="" />
        <div>iphone下载</div>
      </div>
    </div>
    <div class="wechat" id="wechat"></div>
  </body>
  <script>
    const host = 'https://jazx.xmhold.com/prod-api/app/'
    const androidUrl = 'system/version/getByType/android'
    const iosUrl = 'system/version/getByType/ios'
    const andoridDownload = document.querySelector('#andorid-download')
    const iosDownload = document.querySelector('#ios-download')
    const wechat = document.querySelector('#wechat')
    console.log('isWeixin()===>', isWeixin())
    const isWechat = isWeixin()
    const isIos = phoneOs() === 'IOS'
    if (isIos) {
      andoridDownload.style.display = 'none'
    } else {
      iosDownload.style.display = 'none'
    }
    let downloadUrl = {
      android: '',
      ios: ''
    }

    xhr('GET', host + androidUrl).then(res => {
      if (res.code === 200) {
        downloadUrl.android = res.data.updateUrl
      }
    })
    xhr('GET', host + iosUrl).then(res => {
      if (res.code === 200) {
        downloadUrl.ios = res.data.updateUrl
        if (isIos && downloadUrl.ios) {
          const downloadElement = document.createElement('a')
          downloadElement.href = downloadUrl.ios
          downloadElement.click()
          return
        }
      }
    })
    // 安卓下载
    andoridDownload.addEventListener('click', function () {
      if (isWechat) {
        wechat.style.display = 'block'
        return
      }
      //   xhr('POST', downloadUrl.android, true)
      window.open(downloadUrl.android, '_blank')
    })
    // ios下载
    iosDownload.addEventListener('click', function () {
      location.href = downloadUrl.ios;
    })
    // 判断是否是微信环境
    function isWeixin() {
      var ua = window.navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true
      } else {
        return false
      }
    }
    // 判断机型环境
    function phoneOs() {
      var u = navigator.userAgent,
        isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
        isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

      if (isAndroid) {
        return 'Android'
      }

      if (isiOS) {
        return 'IOS'
      }

      return ''
    }
    function xhr(type, url, isDownload) {
      return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest()
        xhr.open(type, url)
        xhr.send()
        if (isDownload) {
          xhr.responseType = 'blob' // 返回类型blob
        }
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              if (isDownload) {
                const blob = new Blob([xhr.response])
                const downloadElement = document.createElement('a')
                // 创建下载的链接
                const href = window.URL.createObjectURL(blob)
                downloadElement.href = href
                downloadElement.download = '驾安之星.apk' // 下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() // 点击下载
                document.body.removeChild(downloadElement) // 下载完成移除元素
                window.URL.revokeObjectURL(href) // 释放掉blob对象
              }
              resolve(JSON.parse(xhr.responseText))
            }
          }
        }
      })
    }
  </script>
</html>
